header {
  .admin-bar {
    @apply container flex flex-wrap items-center justify-start gap-y-2 gap-x-4;

    &__container {
      @apply bg-tertiary py-2;
    }

    &__title {
      @apply hidden md:block text-sm font-bold text-black;
    }

    &__button {
      @apply button button__xs bg-white/[0.15] text-black font-normal;
    }

    // fake justify-content: space-between as of 3rd item
    &__title + .admin-bar__button + .admin-bar__button {
      @apply ml-0 md:ml-auto;
    }
  }

  #flash-messages-container {
    @apply mt-28 md:mt-0;
  }

  &.with-admin-bar {
    #flash-messages-container {
      @apply mt-40 md:mt-0;
    }

    #menu-bar-container {
      @apply mt-[140px] md:mt-0;
    }
  }

  #sticky-header-container {
    @apply fixed w-full top-0 z-40 bg-white md:relative transition-top duration-300;
  }

  .main-bar {
    @apply container flex justify-between gap-4 items-center py-5 h-20;

    &--focus-mode-back-button {
      @apply h-16 lg:h-24;

      .main-bar__links-desktop__item {
        @apply flex-row;
      }
    }

    &__container {
      @apply relative w-full flex justify-between;
    }

    &__logo {
      @apply col-span-3 xl:col-span-2 prose prose-img:max-h-16 prose-img:my-0;
    }

    &__logo-desktop {
      @apply hidden lg:block;
    }

    &__logo-mobile {
      @apply lg:hidden;
    }

    &__search {
      @apply hidden md:block col-span-2 col-start-5 xl:col-start-4;

      form {
        @apply block relative rounded text-md border border-neutral-200 outline outline-1 outline-transparent rounded bg-background-2 leading-relaxed;
      }

      input[type="text"] {
        @apply block bg-transparent w-full px-4 py-2 h-full;

        &::placeholder {
          @apply text-neutral-500 text-sm ltr:pl-0 rtl:pr-0;
        }
      }

      button[type="submit"] {
        @apply absolute rtl:left-2 ltr:right-2 inset-y-0 text-secondary px-2;

        svg {
          @apply fill-neutral-500;
        }
      }
    }

    &__back-button {
      @apply col-span-2 text-secondary;

      svg {
        @apply fill-current;
      }
    }

    &__menu-mobile {
      @apply lg:hidden flex flex-row-reverse items-center gap-x-3;
    }

    &__links-desktop,
    > *:last-child:not(.main-bar__back-button) {
      @apply col-span-1 md:col-start-8 lg:col-start-8 lg:col-span-5 justify-self-end;
    }

    &__links-desktop {
      @apply hidden lg:flex items-center justify-between text-center divide-x-2 divide-gray-3 ml-auto [&>*]:px-4 xl:[&>*]:px-6 first:[&>*]:pl-0 last:[&>*]:pr-0;

      &__item {
        @apply flex items-center gap-x-2 text-secondary px-2 py-1 rounded;

        &:hover {
          @apply bg-secondary rounded-[4px] text-white;
        }

        &-wrapper {
          @apply flex gap-x-4 xl:gap-x-6;
        }

        &-account {
          @apply w-6 h-6 flex items-center justify-center bg-secondary text-white rounded-full text-xs font-bold mr-2;
        }
      }

      &__dropdown {
        @apply flex items-end absolute top-0 right-0 z-30 h-screen;

        .menu-bar {
          &__main-dropdown {
            @apply hidden lg:flex flex-col h-full md:p-8;

            &__left {
              @apply w-full;
            }
          }

          &__dropdown-menu {
            @apply w-full;

            li {
              @apply py-3 md:py-3.5 border-b border-t-0 last:border-0 border-gray-3 #{!important};

              a {
                @apply no-underline;
              }
            }
          }
        }

        #main-dropdown-summary-desktop-close {
          @apply self-end;
        }
      }

      &__trigger {
        @apply text-secondary cursor-pointer py-1 px-2 text-md leading-[22px] w-fit flex items-center gap-x-2;

        span {
          @apply text-secondary;
        }

        &:hover {
          @apply bg-secondary rounded-[4px] text-white;

          svg,
          span {
            @apply text-white;
          }
        }

        &[aria-expended="true"] {
          #content {
            @apply bg-[rgb(0_0_0_/_0.5)];
          }
        }
      }

      /* overwrite default dropdown styles */
      [data-target*="dropdown"] > span:only-of-type {
        @apply gap-0;
      }

      svg {
        @apply w-4 h-5 fill-current;
      }

      svg + span {
        @apply text-md leading-[22px] first-letter:uppercase font-semibold;
      }
    }

    &__links-mobile {
      @apply fixed bottom-0 left-0 z-40 bg-white w-full px-4 py-3 flex justify-between text-secondary shadow-[0_-4px_6px_rgba(198,198,198,0.25)];

      &__trigger {
        @apply flex items-center text-secondary cursor-pointer justify-evenly gap-x-1 px-2 py-1;

        svg {
          @apply w-6 h-6 fill-current;
        }

        span {
          @apply text-secondary;
        }

        &:hover {
          @apply bg-secondary rounded-[4px] text-white;

          svg,
          span {
            @apply text-white;
          }
        }
      }

      &__dropdown {
        @apply absolute top-full left-0 z-30 bg-white;
      }

      &__account {
        @apply fixed top-0 left-0 w-full h-full z-30 bg-white;

        ul {
          @apply my-6 divide-y divide-gray-3;
        }

        li {
          @apply py-4;
        }

        .dropdown__item {
          @apply text-md;
        }

        .main-bar {
          @apply border-b border-gray;
        }

        .main-bar__avatar {
          @apply w-12 h-12;
        }

        .main-bar__avatar-name {
          @apply w-12 h-12 text-2xl;
        }

        .account-container {
          @apply before:block before:absolute before:top-16 before:right-14 before:content-[""] before:bg-white before:w-2 before:h-12 before:-mt-8;
        }
      }

      &__item {
        @apply flex relative;
      }

      &__search {
        @apply fixed top-0 left-0 w-full h-full z-30 bg-white;
      }

      &__login {
        @apply w-auto h-full flex flex-row items-center relative text-secondary gap-1 pl-2 pr-2;

        svg {
          @apply w-8 h-6 fill-current;
        }

        svg + span {
          @apply w-auto text-md leading-[22px] first-letter:uppercase font-semibold;

          flex-shrink: 0;
        }
      }
    }

    &__dropdown {
      @apply divide-y divide-gray-3 z-20 w-64;

      &-container {
        @apply relative cursor-pointer;
      }

      &-notification {
        @apply w-2.5 h-2.5 rounded-full bg-primary;
      }

      &-trigger {
        @apply flex flex-col items-center text-secondary relative px-2 py-1;
      }
    }

    &__notification {
      @apply w-2.5 h-2.5 rounded-full block absolute -top-0.5 right-1.5 bg-primary;
    }

    &__avatar {
      @apply block w-6 h-6 rounded-full border border-secondary overflow-hidden mr-2;

      span {
        @apply w-full h-full rounded-full overflow-hidden;
      }

      img {
        @apply object-cover w-full h-full;
      }
    }

    &__avatar-name {
      @apply w-6 h-6 flex items-center justify-center bg-secondary text-white rounded-full text-xs font-bold mr-2;
    }

    /* overwrite default dropdown styles */
    [id*="dropdown-menu"] {
      @apply py-0 mx-0 w-full lg:w-fit;

      &[aria-hidden="true"] {
        @apply md:hidden;
      }
    }
  }

  .menu-bar {
    @apply container h-full flex justify-between items-center lg:relative last-of-type:[&>svg]:hidden;

    &__container {
      @apply bg-white relative h-14 flex justify-between;
    }

    &__breadcrumb-desktop {
      @apply hidden lg:flex justify-between items-center [&>*]:text-md [&>*]:text-black gap-x-2;

      .no-interactive {
        @apply font-normal px-0;
      }

      &__dropdown-trigger {
        @apply flex rounded py-1 z-20 font-semibold;

        &:hover {
          @apply z-10 relative before:content-[''] before:absolute before:w-[calc(100%+3rem+1px)] before:min-w-[10rem] before:h-40 before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/4 before:-z-10;
        }

        svg {
          @apply w-6 h-6 fill-current;
        }
      }

      &__dropdown-wrapper {
        @apply flex items-center cursor-pointer underline focus:backdrop-brightness-75 focus:outline-none;
      }

      &__dropdown-content {
        @apply absolute z-20 top-full cursor-auto;

        &-secondary {
          @apply absolute z-20 top-[calc(100%+12px)];
        }
      }

      /* overwrite default dropdown styles */
      [id*="dropdown-menu"] {
        @apply cursor-auto;

        &[aria-hidden="true"].no-animation {
          @apply opacity-0 invisible;
        }

        &[aria-hidden="true"]:not(.no-animation) {
          animation-name: fadeOut;
          animation-duration: 300ms;
          animation-delay: 300ms;
          animation-fill-mode: forwards;

          &:hover {
            animation: none;
          }
        }

        &[aria-hidden="false"] {
          animation-name: fadeIn;
          animation-duration: 300ms;
          animation-fill-mode: forwards;
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
            visibility: hidden;
          }

          to {
            opacity: 1;
            visibility: visible;
          }
        }

        @keyframes fadeOut {
          from {
            opacity: 1;
            visibility: visible;
          }

          to {
            opacity: 0;
            visibility: hidden;
          }
        }
      }

      [data-target*="dropdown"] {
        @apply w-auto p-0 flex items-center gap-0 last-of-type:[&>svg]:block;

        > svg {
          @apply w-5 h-5 text-white;
        }
      }
    }

    &__breadcrumb-mobile {
      @apply block lg:hidden w-full z-20;

      &__dropdown-trigger {
        @apply flex items-center justify-between text-black;

        svg {
          @apply w-6 h-6 fill-current;
        }
      }

      .menu-bar__breadcrumb-item {
        @apply font-semibold underline;
      }

      /* overwrite default dropdown styles */
      [id*="dropdown-menu"] {
        @apply mx-0 py-0 border-0;

        &[aria-hidden="true"] {
          @apply md:hidden lg:flex;
        }
      }

      [data-target*="dropdown"] {
        @apply md:block lg:hidden w-auto last-of-type:[&>svg]:block ml-auto;

        > svg {
          @apply text-white;
        }
      }
    }

    &__actions {
      @apply hidden lg:flex justify-between items-center gap-6;

      &-mobile {
        @apply [&_svg]:w-4 [&_svg]:h-4 [&_span]:sr-only;
      }
    }

    &__language-chooser {
      @apply absolute top-full left-0 rounded w-full bg-gray-5;

      &-desktop {
        @apply border-r border-gray-6 pr-10;

        &.focus-mode {
          @apply border-none pr-0;
        }
      }

      &-desktop,
      &-mobile {
        & button {
          @apply border border-neutral-300 rounded px-4 py-2 gap-x-2;

          & > span,
          & > svg:first-of-type {
            @apply text-neutral-500;

            display: block !important;
          }

          & > span.mobile-holder {
            @apply items-center gap-x-1;

            display: flex !important;
          }

          & > span {
            @apply text-sm font-normal;
          }

          & > svg:last-of-type {
            @apply text-gray-2  ml-1;

            display: block !important;
          }
        }

        #dropdown-menu-language-chooser {
          @apply absolute top-full bg-white shadow-[1px_4px_8px_3px_rgba(0,0,0,0.15)] p-2;

          ul {
            @apply flex flex-col space-y-2;

            li:hover {
              @apply rounded;
            }

            .is-active {
              @apply bg-neutral-200 rounded;

              &:hover {
                @apply bg-[var(--secondary)];
              }
            }
          }
        }

        #dropdown-menu-language-chooser-mobile {
          @apply overflow-scroll h-[50vh];

          ul {
            .is-active {
              @apply bg-neutral-200 rounded;

              &:hover {
                @apply bg-[var(--secondary)];
              }
            }
          }
        }
      }
    }

    &__dropdown-menu {
      @apply w-full md:w-1/4 px-4 md:px-0 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-[var(--secondary)];

      > * {
        @apply py-3 md:py-3.5 md:px-2;
      }

      a {
        @apply flex items-center justify-start gap-1 font-semibold text-xl text-[var(--secondary)] underline;

        span {
          @apply min-w-0 truncate;
        }

        svg {
          @apply flex-none fill-current;
        }
      }

      li:hover {
        @apply bg-[var(--secondary)] rounded-[4px];

        a {
          @apply text-white;
        }
      }
    }

    &__main-dropdown {
      @apply bg-white flex flex-row rounded-b shadow-lg text-black w-full lg:w-[530px] h-screen md:h-auto;

      &__left {
        @apply p-4 md:py-8 md:px-0 space-y-5 hidden md:block md:w-3/4;

        &-top {
          @apply border-b-4 border-gray-3 pb-3;
        }
      }

      &__top {
        @apply w-full px-4;

        &-menu {
          @apply w-full md:w-[100%] mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;

          > * {
            @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;

            /* since the grid has 2 columns, remove the border for these last 2 columns */
            &:nth-last-child(-n + 2) {
              @apply md:border-0;
            }
          }

          a {
            @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;

            span {
              @apply min-w-0 truncate;
            }

            svg {
              @apply flex-none fill-current;
            }
          }
        }
      }

      &__bottom {
        @apply hidden md:flex;

        &-right {
          @apply mr-2 mb-2;
        }

        &-left {
          @apply mr-2 mt-1;
        }
      }

      &__title {
        @apply hidden h4 md:flex md:h3;
      }

      &__subtitle {
        @apply hidden text-md md:flex md:text-lg text-gray-2 mt-5;
      }
    }

    &__dropdown-desktop {
      .card__highlight {
        @apply flex-col ring-transparent rounded-lg shadow-[1px_4px_8px_3px_rgba(0,0,0,0.15)];

        &-img {
          @apply w-full aspect-[3/1] rounded-tl-lg rounded-tr-lg;
        }

        &-text {
          @apply w-full items-start text-start bg-background-2 rounded-bl-lg rounded-br-lg;

          h3 {
            @apply font-bold;
          }
        }
      }
    }

    &__secondary-dropdown {
      @apply absolute top-full left-0 lg:relative flex justify-between bg-white rounded-b shadow-lg text-black w-full lg:w-[1000px];

      &__left {
        @apply hidden md:block w-3/4 p-8 text-md;
      }

      &__title {
        @apply h4 md:h3;
      }

      nav {
        @apply w-full md:w-1/4;
      }

      &__menu {
        @apply w-full bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;

        > * {
          @apply py-3 md:py-3.5;
        }

        a {
          @apply flex items-center justify-start gap-1 font-semibold text-lg text-white;

          span {
            @apply min-w-0 truncate;
          }

          svg {
            @apply flex-none fill-current;
          }
        }
      }

      &__metadata {
        @apply flex items-center text-sm space-x-6 pb-6;

        > span {
          @apply flex items-center space-x-2;
        }
      }
    }
  }
}
